<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>登录&注册</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style type="text/css">
        body {
            background: #fff;
            font-size: 14px;
            overflow: hidden;
            width: 100%;
        }
        .logo {
            text-align: center;
            margin-top: 100px;
        }
        .logo img{
            width: 70%;

        }
        .info{
            margin-top: 50px;
        }
        .myBtn{
            width: 70%;
            margin: 0 auto;
            border-radius: 5px;
        }
        .login{
            background: #fff;
            color:#ff3333;
            border: 1px solid #ff3333;
            margin-top: 15px;
        }
        .longOther{
            text-align: center;
            margin-top: 50px;
        }
        .longOther img{
            width: 20%;
        }
        .aui-icon-left{
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 9;
        }
        .contain{
            width: 200%;
            transition: .5s;
            overflow: hidden;
        }
        .showLeft{
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .loginContain,.choiceRegister{
            width: 50%;
            float: left;
        }
        .choiceRegister{
            text-align: center;
        }
        .choiceRegister img{
            width: 100px;
        }
        .cai{
            margin-top: 100px;
            margin-bottom: 50px;
            color: #ff3333;
        }
        .cai p{
            color: #ff3333;
        }
        .mai p{
            color: #4488ee;
        }
        .closeLeft{
            display: none;
        }
    </style>
</head>
<body>
<header>
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler close" tapmode onclick="closeWin()"></div>
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler closeLeft" tapmode onclick="closeLeft()"></div>
</header><!-- /header -->
<div class="contain">
    <div class="loginContain">
        <div class="logo"><img src="../image/logo.jpg"></div>
        <div class="info">
            <div class="myBtn" tapmode onclick="showLeft()">注册</div>
            <div class="myBtn login">登录</div>

        </div>
        <div class="longOther">
            <img src="../image/weixin.png"><img src="../image/QQ.png">
        </div>
    </div>
    <div class="choiceRegister">
        <div class="cai">
            <img src="../image/cai.png">
            <p>我要采购</p>
        </div>
        <div class="mai">
            <img src="../image/mai.png">
            <p>我要卖货</p>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        
    }
    function showLeft(){
        $(".contain").addClass("showLeft");
        $(".close").css({"display":"none"});
        $(".closeLeft").css({"display":"block"});
    }
    function closeLeft(){
        $(".contain").removeClass("showLeft");
        $(".close").css({"display":"block"});
        $(".closeLeft").css({"display":"none"});
    }
</script>
</html>